<template>
  <el-form ref="form" :model="form" label-width="auto">
    <el-row :gutter="10">
      <el-col :span="24">
        <el-form-item
          label="组件说明"
          prop="componentLabel"
          :rules="[
            {
              required: true,
              message: '请输入组件说明',
              trigger: 'blur'
            }
          ]"
        >
          <el-input v-model="form.componentLabel"></el-input> </el-form-item
      ></el-col>
      <el-col :span="24"
        ><el-form-item
          label="组件类型"
          prop="componentType"
          :rules="[
            { required: true, message: '请选择组件类型', trigger: 'change' }
          ]"
        >
          <el-select v-model="form.componentType" @change="Typechange">
            <el-option
              v-for="item in componentType"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select> </el-form-item
      ></el-col>
      <el-col :span="12">
        <el-form-item
          label="是否只读"
          prop="readOnly"
          :rules="[
            { required: true, message: '请选择是否只读', trigger: 'change' }
          ]"
          ><el-switch
            v-model="form.readOnly"
            active-color="#13ce66"
            inactive-color="#efefef"
          ></el-switch
        ></el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="首次保存只读"
          prop="disableWhenNotNull"
          :rules="[
            {
              required: true,
              message: '请选择首次保存只读',
              trigger: 'change'
            }
          ]"
          ><el-switch
            v-model="form.disableWhenNotNull"
            active-color="#13ce66"
            inactive-color="#efefef"
          ></el-switch
        ></el-form-item>
      </el-col>
      <el-col
        v-for="(item, index) in TypeList"
        :key="item.prop"
        :span="item.span"
      >
        <el-form-item
          :label="item.label"
          :key="item.prop + index"
          :prop="item.prop"
          :rules="item.rules"
        >
          <component
            :is="item.componentName"
            :isClearable="item.isClearable"
            :config="item"
            :modelValue.sync="form[`${item.prop}`]"
            @delete="deleteProp"
          ></component>
        </el-form-item>
      </el-col>
      <div
        v-if="
          this.form.componentType === 'DynaUIModelCombo' &&
          form.comboDataType === 'code'
        "
      >
        <el-col
          v-for="(item, index) in zdsjList"
          :key="item.prop"
          :span="item.span"
        >
          <el-form-item
            :label="item.label"
            :prop="item.prop"
            :key="item.prop + index"
            :rules="item.rules"
          >
            <component
              :is="item.componentName"
              :config="item"
              :modelValue.sync="form[`${item.prop}`]"
              @delete="deleteProp"
            ></component>
          </el-form-item>
        </el-col>
      </div>
      <div
        v-else-if="
          this.form.componentType === 'DynaUIModelCombo' &&
          form.comboDataType === 'db'
        "
      >
        <el-col
          v-for="(item, index) in sjkList"
          :key="item.prop + index"
          :span="item.span"
        >
          <el-form-item
            :label="item.label"
            :prop="item.prop"
            :key="item.prop + index"
            :rules="item.rules"
          >
            <component
              :is="item.componentName"
              :config="item"
              :modelValue.sync="form[`${item.prop}`]"
              @delete="deleteProp"
            ></component>
          </el-form-item>
        </el-col>
      </div>
    </el-row>
    <div style="margin-top: 10px; text-align: center">
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">保 存</el-button>
        <el-button @click="diaClose">关 闭</el-button>
      </span>
    </div>
  </el-form>
</template>

<script>
import {
  TextTypeList,
  SelectTypeList,
  zdsjList,
  sjkList,
  lineList,
  dateList
} from './TypeOptions'
import NtInput from '@/components/nt-form/nt-input'
import NtSwitch from '@/components/nt-form/nt-switch'
import NtSelect from '@/components/nt-form/nt-select'
import {
  editViewCodeComboApi,
  editViewDateApi,
  editViewDbComboApi,
  editViewEmptyComboApi,
  editViewNumberApi,
  editViewTextApi,
  editViewTextareaApi,
  getComponentDataApi,
  getDictionaryApi
} from '@/api/Device-all/Device-view'
export default {
  name: 'EditDialog',
  components: { NtInput, NtSwitch, NtSelect },
  props: {
    rowData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      form: {},
      TypeList: null,
      zdsjList,
      sjkList,
      componentType: []
    }
  },
  watch: {
    form: {
      handler(val) {
        console.log(val)
        if (this.form.componentType === 'DynaUIModelTextField') {
          this.TypeList = TextTypeList
        } else if (this.form.componentType === 'DynaUIModelCombo') {
          this.TypeList = SelectTypeList
        } else if (this.form.componentType === 'DynaUIModelTextArea') {
          this.TypeList = lineList
        } else if (this.form.componentType === 'DynaUIModelDate') {
          this.TypeList = dateList
        } else {
          this.TypeList = TextTypeList
        }
      },
      deep: true
    }
  },
  async created() {
    await this.getDictionary('VomComponentType')
    await this.getComponentData()
  },
  async mounted() {
    // if (this.form.componentType === 'DynaUIModelCombo') {
    //   if (this.form.comboTopCode) {
    //     this.$set(this.form, 'comboDataType', 'code')
    //   } else if (this.form.comboDataQuery) {
    //     this.$set(this.form, 'comboDataType', 'db')
    //   } else {
    //     this.$set(this.form, 'comboDataType', 'none')
    //   }
    // }
  },
  methods: {
    // 字典查询
    async getDictionary(name) {
      const res = await getDictionaryApi(name)
      this.componentType = res.data.list
    },
    // 查询设备模型视图组件信息
    async getComponentData() {
      const res = await getComponentDataApi(this.rowData.componentId)
      this.form = { ...res.data.entity }
    },
    async submit() {
      console.log(this.form)
      await this.$refs.form.validate()
      const res =
        this.form.componentType === 'DynaUIModelTextField'
          ? await editViewTextApi(this.form)
          : this.form.componentType === 'DynaUIModelTextArea'
          ? await editViewTextareaApi(this.form)
          : this.form.componentType === 'DynaUIModelNumberField'
          ? await editViewNumberApi(this.form)
          : this.form.componentType === 'DynaUIModelDate'
          ? await editViewDateApi(this.form)
          : this.form.componentType === 'DynaUIModelCombo' &&
            this.form.comboDataType === 'none'
          ? await editViewEmptyComboApi(this.form)
          : this.form.componentType === 'DynaUIModelCombo' &&
            this.form.comboDataType === 'code'
          ? await editViewCodeComboApi(this.form)
          : await editViewDbComboApi(this.form)
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: res.message,
          duration: 2000
        })
        this.$emit('updateList')
        this.diaClose()
      } else {
        this.$message({
          type: 'error',
          message: res.message,
          duration: 2000
        })
      }
    },
    diaClose() {
      this.$emit('diaClose')
    },
    Typechange() {
      // this.$refs.form.clearValidate()
      // this.$forceUpdate()
    },

    deleteProp(prop) {
      console.log(prop)
      // this.$nextTick(() => {
      //   delete this.form[prop]
      // })
      this.$delete(this.form, prop)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}
</style>
